<template>
  <view 
    class="result-custom-page" 
    :style="{backgroundImage:'url('+staticImgs.topBg+')'}"
    v-if="isLoadOk"
  >
    <view class="base-info-wrapper">
      <view class="num-box">测评报告编号：{{report.serialNumber}}</view>
      <view class="name-box">
        {{report.name}}
      </view>
      <view class="conclusion-box">
        <view class="tit-wrapper">
          <view class="row-1">{{report.conclusion1}}</view>
          <view class="row-2">{{report.conclusion2}}</view>
        </view>
        <view class="label">
          报告结果
        </view>
        <view class="time">测评时间：{{scl.dateTime}}</view>
      </view>
    </view>
    <view class="data-conclusion-box">
      <view class="label-wrapper">
        <view class="text col-1">维 度</view>
        <!-- <view class="text col-2">我的指标</view> -->
        <view class="text col-2">我的分数</view>
      </view>
      <view class="data-wrapper">
        <view class="head-row">
          <view class="col-1">
            <text class="text">职业类型</text>
            <text class="colon">:</text>
          </view>
          <!-- <view class="col-2">I - S- F- J</view> -->
          <view class="col-3">{{report.conclusion1}}</view>
        </view>

    <view class="bar-chart-box">
      <!-- <BlockTit tit="柱形图" /> -->
      <view class="bar-chart">
        <view class="bar-chart-wrapper" v-for="(item,index) in scoreArr" :key="index">
            <view class="row" >
              <view class="bar">
                <view class="text" :style="{'color':item.actIndex === 0 ? '#333333' : '#666666'}" >{{item.arr[0].label}}</view>
                <view class="progress-box">
                  <progress  activeColor="#fff" backgroundColor="#6B77FF"   :percent="item.arr[0].num" :strokeWidth="barHiehgt" />
                </view>
              </view>
              <view class="bar"> 
                <view class="progress-box" style="border: 1rpx solid #ff8843;">
                  <progress activeColor="#FF8843" backgroundColor="#fff" :percent="item.arr[1].num" :strokeWidth="barHiehgt" />
                </view>
                <view class="text" :style="{'color':item.actIndex === 1 ? '#333333' : '#666666'}">{{item.arr[1].label}}</view>
              </view>
            </view>
            <view class="icon"></view>
            <view class="bar-label">{{item.label}}</view>
        </view>
        
      </view>
    </view>
      </view>
    </view>
    <!-- <view class="dashed-line"></view> -->
    
    
    
    <!-- <view class="dashed-line"></view> -->
    <view class="common-model-box">
      <BlockTit tit="常模对比" />
      <view class="normal-tit">{{report.normComparison.tit}}</view>
      <view class="legend">
        <image :src="report.normComparison.img" mode=""></image>
      </view>
    <!--  <CommonChart 
        type="bar"
        :chatHeight="600"
        canvasId="sport_c" :canvas2d="isCanvas2d" :resshow="delayload"
        :chartData="speedRankData"
        background="none"
        :opts="{
          fontColor:'#333',
          fontSize:14,
          legend:{
            show:false
          },
          extra:{
            bar:{
                seriesGap:20,
                categoryGap:10,
                height:20
            },
          },
          xAxis:{
            min:0,
            max:14,
            splitNumber:6,
            tofix:0,
            fontColor:'#333',
            unit:'%',
            titleFontColor:'#333',
            gridColor:'rgba(160,160,165,.26)',
            scrollBackgroundColor: 'rgba(160,160,165,.26)',
            marginTop:8,
          },
          yAxis:{
            formatter:(value,index,series,opts)=>{
              console.log(value,'----formatter')
            },
            showTitle:false,
            marginTop:10,
          }
        }"
      /> -->
      
        <!-- 
        :opts="{xAxis:{disabled: true,disableGrid:true},extra:{bar:{barBorderCircle:true,width:20}},legend:{show:false}}"
      -->
      <!-- <qiun-data-charts type="mix"
      	:chartData="userARPU" 
      	:reshow="delayload"
      	:canvas2d="isCanvas2d"
      	canvasId="two_a"
      	:opts="{yAxis:{data:[{title: '',max:userARPU?userARPU.yAxis[0].max:0,min:userARPU?userARPU.yAxis[0].min:0},{title: '',unit:'%',max:userARPU?userARPU.yAxis[1].max:0,min:userARPU?userARPU.yAxis[1].min:0,position:'right'}]}}"/> -->
    </view>
    <view class="dashed-line"></view>

 <!--   <view class="norm-comparison-box">
      <BlockTit tit="常模对比" />
      <view class="tit">⼼理状态⼈群分</view>
      <view class="legend-wrapper">
        <view class="legend">
          <image :src="staticImgs.topBg" mode=""></image>
        </view>
        <view class="annotation-wrapper">
          <view class="annotation-box">
            <view class="icon"></view>
            <view class="text">问题严重</view>
          </view>
          <view class="annotation-box">
            <view class="icon"></view>
            <view class="text">亚健康状态</view>
          </view>
          <view class="annotation-box">
            <view class="icon"></view>
            <view class="text">存在健康问题</view>
          </view>
          <view class="annotation-box">
            <view class="icon"></view>
            <view class="text">十分健康</view>
          </view>

        </view>
      </view>
    </view>
 -->
    <view class="dashed-line"></view>

    <view class="detailed-results-box">
      <BlockTit tit="结果详解" />
      <view class="summary-wrapper">
        <view class="intro-box">
          <view class="row-1">经心理学家统计分析整合</view>
          <view class="row-2">你的类别</view>
        </view>
        <view class="conclusion-box">
          <view class="row-1">
            <view v-for="(item,index) in conclusionArr[0]" :key="index">
              {{item}}
            </view>
          </view>
          <view class="row-2">
            <view v-for="(item,index) in conclusionArr[1]" :key="index">
              {{item}}
            </view>
          </view>
        </view>
      </view>
      
      
      <template v-if="mainResult.detailedResults">
        <view class="block" v-for="(item,index) in mainResult.detailedResults.contentArr" :key="index">
          <view class="sub-tit">{{item.tit}}</view>
          <template v-if="item.contentArr">
            <view class="p" v-for="(p,subIndex) in item.contentArr" :key="subIndex">
              {{p.p}}
            </view>
          </template>
          <view class="text-list" v-if="item.list">
            <view class="li" v-for="(p,subIndex) in item.list" :key="subIndex">
              {{p}}
            </view>
          </view>
        </view>
        <view class="dashed-line"></view>
      </template>
      
      <!-- <view class="dashed-line"></view> -->
    </view>
    <view class="checkup-mental-entry-box">
      <MentalHealthCheckupEntryVue sourceType="18" />
    </view>
    
    <view class="occupational-recommend-box" v-if="recommendJobImg">
      <BlockTit tit="适合职业" />
      <view class="block">
        <!-- {{ recommendJobImg }} -->
        <image class="img" :src="recommendJobImg" />
      </view>
      <view class="dashed-line"></view>
    </view>
    
    <view class="occupational-advantage-box" v-if="mainResult.xgjx">
      <template v-for="(item,index) in mainResult.xgjx" >
        <BlockTit :tit="item.tit" />
        <view class="block" v-for="(subItem,subIndex) in item.contentArr" :key="subIndex">
    
            <view class="sub-tit">{{subItem.tit}}</view>
            <view class="sub-block" v-for="(childrenItem,childrenIndex) in subItem.contentArr" :key="childrenIndex">
              <view class="children-tit" v-if="childrenItem.conclusion">
                {{childrenItem.conclusion}}
              </view>
                <view class="children-p" v-if="childrenItem.p">
                  {{childrenItem.p}}
                </view>
            </view>
        </view>
        <view class="dashed-line"></view>
      </template>
      
    </view>
    
    
    <view class="occupational-advantage-box" v-if="mainResult.rjjy">
      <template v-for="(item,index) in mainResult.rjjy" >
        <BlockTit :tit="item.tit" />
        <view class="block" v-for="(subItem,subIndex) in item.contentArr" :key="subIndex">
    
            <view class="sub-tit">{{subItem.tit}}</view>
            <view class="sub-block" v-for="(childrenItem,childrenIndex) in subItem.contentArr" :key="childrenIndex">
              <view class="children-tit" v-if="childrenItem.conclusion">
                {{childrenItem.conclusion}}
              </view>
                <view class="children-p" v-if="childrenItem.p">
                  {{childrenItem.p}}
                </view>
                <view class="dashed-line" v-if="subItem.contentArr.length-1 != childrenIndex"></view>
            </view>
        </view>
        <!-- <view class="dashed-line"></view> -->
      </template>
      
    </view>
    
    
    
    <view class="occupational-advantage-box" v-if="mainResult.occupationalAdvantage">
      <BlockTit tit="职业优势" />
      <view class="block">
        <view class="text-list">
          <view class="li" v-for="(p,subIndex) in mainResult.occupationalAdvantage.list" :key="index">
            {{ p }}
          </view>
        </view>
      </view>
      <view class="dashed-line"></view>
    </view>
    
    
    <view class="occupational-advantage-box" v-if="mainResult.occupationalDisadvantage">
      <BlockTit tit="职业劣势" />
      <view class="block">
        <view class="text-list">
          <view class="li" v-for="(p,subIndex) in mainResult.occupationalDisadvantage.list" :key="index">
            {{ p }}
          </view>
        </view>
      </view>
      <view class="dashed-line"></view>
    </view>
    
    
    
    <view class="occupational-advantage-box" v-if="mainResult.suggestions">
      <BlockTit tit="发展建议" />
      <view class="block">
        <view class="text-list">
          <view class="li" v-for="(p,subIndex) in mainResult.suggestions.list" :key="index">
            {{ p }}
          </view>
        </view>
      </view>
      <view class="dashed-line"></view>
    </view>
    
    <view class="science-popularization-box" v-if="sciencePopularization && !mainResult.rjjy">
      <BlockTit tit="知识科普" />
      <view class="summary-wrapper">
        <view class="img">
          <image :src="staticImgs.resultImg1" mode=""></image>
        </view>
        <view class="block">
            <view class="p" v-for="(item,index) in sciencePopularization" :key="index">
              {{item}}
            </view>
        </view>
      </view>
    </view>
    <slot name="special" />
    <view class="references-box">
      <view class="tit">参考文献</view>
      <view class="text-list">
        <view class="text" v-for="(text,index) in referenceList" :key="index">
          [{{index+1}}]{{text}}
        </view>
      </view>
    </view>

    <view class="report-time-box">
      <view>此测评报告仅供参考</view>
      <view>报告时间：{{scl.dateTime}}</view>
    </view>

  </view>
</template>

<script>
  import BlockTit from '@/subcontractorB/components/BlockTit.vue'
  // import CommonChart from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
  // import CommonChart from '@/subcontractorB/components/qiun-data-charts/qiun-data-charts.vue'
  import CommonChart from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
  import MentalHealthCheckupEntryVue from "@/components/MentalHealthCheckupEntry.vue";
  
  export default {
    props:{
      pageData:{
        type:Object,
        default:null
      }
    },
    components: {
      BlockTit,
      CommonChart,
      MentalHealthCheckupEntryVue
    },
    data() {
      return {
        delayload:null,
        
        isLoadOk:false,
        staticImgs: {
          topBg: this.imgBaseURL + '/scl/scl_result_custom_bg.png',
          resultImg1:this.imgBaseURL + '/scl/scl_result_info.png',
        },
        referenceList: [
          // "钱铭怡. (主编). (2006).变态心理学(pp. 135–163). 北京大学出版社.",
          // "Goldney, R. D., Fisher, L. J., Dal Grande, E., & Taylor, A. W. (2004). Subsyndromal depression:prevalence, use of health services and quality of life in an Australian population. Social Psychiatryand Psychiatric Epidemiology, 39(4)",
          // "Graber,J. A.(2013). Internalizing problems during adolescence. In M. Richard,L. S. Lerner(Eds.),Handbook of Adolescent Psychology,Second Edition. John Wiley&Sons Inc.",
          // "傅小兰、张侃.中国国民心理健康发展报告（2021—2022）[M].北京：社会科学文献出版社，2023:76-77.",
          // "王振,苑成梅,黄佳,李则挚,陈珏,张海音... & 肖泽萍.(2011).贝克抑郁量表第2版中文版在抑郁症患者中的信效度. 中国心理卫生杂志(06),476-480. doi:CNKI:SUN:ZXWS.0.2011-06-023.",
          // "American Art Therapy Association. 1996, Mission statement. Mundelein, IL: Author.",
          // "王晓歌，刘吉文，杨帅，等.运动对慢性不可预测轻度应激模型鼠抑郁样行为的干预作用：系统综述和Meta分析[J].中国组织工程研究，2023,27(05):813~820.",
          // "牛娟,刘明矾,周丽 & 杜泽楷.(2023).抑郁症患者情绪表象的特征及其机制. 中国临床心理学杂志(04),792-796+791. doi:10.16128/j.cnki.1005-3611.2023.04.006.",
          // "Huang Y,Wang Y,Wang H,et al.Prevalence of mental disorders in China:A cross-sectional epidemiological study.The Lancet Psychiatry,2019,6(3):211-224"
        ],
        
        report:{
          id:'',
          name:'',
          conclusion1:'',
          conclusion2:'',
          normComparison:{
            tit:'',
            img:''
          }
        },
        scl:{
          dateTime:'',
        },
        conclusionArr:[
          [],
          [],
        ],
        barHiehgt:0,
        mbtiDict:{
          I:'内倾',
          E:'外倾',
          S:'实感',
          N:'直觉',
          T:'理智',
          F:'情感',
          J:'判断',
          P:'理解'
        },
        mainResult:[],
        sciencePopularization:[
          "内向和外向是我们与世界的相互作用方式，代表心理能量的不同指向。",
          "E 外向-关注自己如何影响外部环境，将心理能量和注意力聚集于外部世界和与他人的交往上。例如：聚会、讨论、聊天。",
          "I内向-关注外部环境的变化对自己的影响，将心理能量和注意力聚集于内部世界，注重自己的内心体验。例如：独立思考、看书、避免成为注意的中心、听的比说的多。",
          "感觉和直觉是我们获取信息的主要方式。",
          "S感觉-关注由感觉器官获取的具体信息，看到的、听到的、闻到的、尝到的、触摸到的事物。例如：关注细节、喜欢描述、喜欢使用和琢磨已知的技能。",
          "N直觉-关注事物的整体和发展变化趋势，灵感、预测、暗示、重视推理。例如：重视想象力和独创力，喜欢学习新技能，但容易厌倦，喜欢使用比喻，跳跃性地展现事实。",
          "思考和情感是我们的决策方式。",
          "T思考-重视事物之间的逻辑关系，喜欢通过客观分析作决定评价。例如：理智、客观、公正。",
          "F情感-以自己和他人的感受为重，将价值观作为判定标准。例如：有同情心、善良、和睦、善解人意，考虑行为对他人情感的影响。",
          "判断和知觉指的是我们的做事方式，是有计划的还是随意即兴的。",
          "J判断-喜欢做计划和决定，愿意进行管理和控制，希望生活井然有序。例如：重视结果、按部就班、有条理、尊重时间期限、喜欢做决定。",
          "P 知觉-灵活、试图去理解、适应环境、倾向于留有余地、喜欢宽松自由的生活方式。例如：重视过程、随信息的变化不断调整目标、喜欢有多种选择。"
        ],
        recommendJobImg:'',
        scoreArr:[
          {
            label:'精力支配',
            arr:[
              {
                label:'外向(E)',
                // num:40,
                num:0,
              },
              {
                label:'内向(I)',
                // num:20,
                num:0,
              }
            ]
          },
          {
            label:'认识世界',
            arr:[
              {
                label:'实感(S)',
                // num:4,
                num:0,
              },
              {
                label:'直觉(N)',
                // num:2,
                num:0,
              }
            ]
          },
          {
            label:'判断事物',
            arr:[
              {
                label:'思考(T)',
                // num:4,
                num:0,
              },
              {
                label:'情感(F)',
                // num:2,
                num:0,
              }
            ]
          },
          {
            label:'生活态度',
            arr:[
              {
                label:'判断(J)',
                // num:4,
                num:0,
              },
              {
                label:'直觉(P)',
                // num:2,
                num:0,
              }
            ]
          }
        ]
      }
    },
    watch:{
      pageData:{
        handler(v){
          console.log(v,'======pageData = MBTI')
          if(v){
            this.report = v
            this.scl.dateTime = v.sclTime
            this.transactionData(v.conclusion1)
            this.barHiehgt = this.rpxToPx(38)
            this.scoreArr = v.scoreArr
            this.referenceList = v.referenceList
            this.mainResult = v.mainResult
            this.recommendJobImg = v.recommendJobImg
            this.isLoadOk = true
            
            
            // _self = this;
            
            uni.getSystemInfo({
              success: function(res) {
                if (res.pixelRatio > 1) {
                  //正常这里给2就行，如果pixelRatio=3性能会降低一点
                  //_self.pixelRatio =res.pixelRatio;
                  // _self.pixelRatio = 2;
                }
              }
            })
            
            this.getData()
          }
        },
        immediate:true,
        deep:true
      }
    },
    methods: {
      transactionData(mbtiStr){
        this.conclusionArr = [
          [],
          [],
        ]
        
        for (var i = 0; i < mbtiStr.length; i++) {
          var mbtiCode = mbtiStr[i];
          if (this.mbtiDict.hasOwnProperty(mbtiCode)) {
            
            if (i > 0 && i < mbtiStr.length) {
              this.conclusionArr[0].push('-'),
              this.conclusionArr[1].push(''); // 在不是第一项和最后一项时添加连字符
            }
            this.conclusionArr[0].push(mbtiCode); // 将字母添加到第一项
            this.conclusionArr[1].push(this.mbtiDict[mbtiCode]); // 将含义添加到第二项
            
          }
        }
        
        console.log(this.conclusionArr,'-----this.conclusionArr')
      },
     async getData() {
     		uni.showLoading();
     		
     	
     		this.delayload = true;
     		uni.hideLoading();
     	},
      
     	tranTimestamp(date) {
     		return new Date(date).getTime()
     	},
     
    },
    onReady() {
    	this.getData()
    }
  }
</script>


<style lang="scss" scoped>
  view {
    box-sizing: border-box;
    word-break: break-all;
        text-align: justify;

  }

  .result-custom-page {
    box-sizing: border-box;
    width: 100vw;
    min-height: 100vh;
    position: relative;
    background-size: 750rpx 1310rpx;
    background-repeat: no-repeat;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);


    .base-info-wrapper {
      margin: auto;
      padding: 90rpx 28rpx 80rpx 28rpx;

      .num-box {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        color: #666666;
      }

      .name-box {
        margin: auto;
        margin-top: 12rpx;
        // width: 696rpx;
        width: 100%;
        height: 120rpx;
        // background: #FFFFFF;
        box-shadow: 0rpx 12rpx 20rpx 0rpx #EEF4FF;
        border-radius: 12rpx;
        // opacity: 0.6;
        background-color: rgba(255, 255, 255, .6);
        border: 3rpx solid #AAC4F9;

        line-height: 120rpx;
        text-align: center;

        font-size: 40rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        color: #1A1B1F;
      }

      .conclusion-box {
        margin-top: 100rpx;
        display: flex;
        align-items: center;
        flex-direction: column;

        .tit-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .row-1 {
            font-size: 50rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            color: #185199;
          }

          .row-2 {
            font-size: 50rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            color: #185199;
          }
        }

        .label {
          margin-top: 20rpx;
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #333333;

          position: relative;

          &::after {
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            right: -29rpx;
            position: absolute;
          }

          &::before {
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            left: -29rpx;
            position: absolute;
          }
        }

        //.label - end

        .time {
          margin-top: 20rpx;
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 300;
          color: #666666;
        }
      }
    }

    // ..base-info-wrapper - end
    .data-conclusion-box {
      width: fit-content;
      margin: auto;



      .label-wrapper {
        display: flex;
        width: 700rpx;
        margin: auto;
        border-bottom: 4rpx solid #333;
        padding-bottom: 16rpx;


        .text {
          font-size: 30rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          color: #333333;
        }

        .col-1 {
          width: 76%;
          padding-left: 30rpx;
        }

        // .col-2{
        //   width: 28%;
        // }
        .col-2 {
          width: 24%;
          padding-right: 24rpx;
          text-align: right;
        }

      }

      .data-wrapper {
        display: flex;
        align-items: center;
        flex-direction: column;
        // margin-bottom: 64rpx;
        width: 710rpx;
        margin-top: 16rpx;
        // border: 1rpx solid #C1C1C1;
        box-shadow: 0px 0px 0px 0.5px #c1c1c1;
        padding-bottom: 24rpx;
        margin-bottom: 70rpx;

        .head-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 96rpx !important;
          background: rgba(211, 224, 255, .32);
          padding-left: 30rpx;
          padding-right: 30rpx;


          .col-1 {
            width: 32%;

            .text {
              font-size: 36rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #393C5A;
            }

            .colon {
              font-size: 32rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #393C5A;
            }
          }

          .col-2 {
            width: 50%;

            font-size: 36rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            color: #185199;
          }

          .col-3 {
            width: 18%;
            font-size: 46rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #6B77FF;
            text-align: right;
                min-width: 120rpx;

          }
        }


      }
    }

    // .data-conclusion-box - end
    
    .common-model-box{
      // margin-top: 50rpx;
      padding-bottom: 70rpx;
      .normal-tit{
        margin-top: 70rpx;
        text-align: center;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      
      .legend{
        &,image{
          margin: auto;
          width: 700rpx;
          height: 1200rpx;
        }
      }
    }
    


    .dashed-line {
      margin: auto;
      width: 694rpx;
      height: 1rpx;

      background-image: repeating-linear-gradient(to right,
          #A9C4F2,
          #A9C4F2 10rpx,
          transparent 10rpx,
          transparent 20rpx);
    }

    // .dashed-line - end

    .bar-chart-box {
      // margin-top: 70rpx;
      // margin-bottom: 70rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      // padding: 0 30rpx;

      .bar-chart {
        margin-top: 30rpx;
        display: flex;
        flex-direction: column;
        row-gap: 40rpx;
        
        .bar-chart-wrapper{
          display: flex;
          flex-direction: column;
          align-items: center;
          .icon{
            margin-top: 14rpx;
            width: 0px;
            height: 0px;
            border: 16rpx solid transparent;
            border-top-color: #dadada;
          }
          .bar-label{
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #252525;
            margin-top: -8rpx;
            // margin-top: 30rpx;
            
          }
        }

        .row {
          display: flex;
          justify-content: center;
          column-gap: 4rpx;
          // row-gap: 40rpx;

          .bar {
            display: flex;
            justify-content: space-between;
            column-gap: 36rpx;

            .progress-box {
              width: 200rpx;
              overflow: hidden;
              height: 40rpx;
              border: 1rpx solid #6B77FF;
              // box-shadow: 0px 0px 0px 0.5px #6B77FF;
              // &:last-child{
              //   border: 1px solid #FF8843;
              // }
            }

            .text {
              font-size: 32rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              color: #333333;
              word-break: keep-all;
            }


          }


        }
      }
    }
    //.bar-chart-box - end

    .norm-comparison-box {
      // margin: auto;
      margin-top: 70rpx;
      margin-bottom: 70rpx;
      display: flex;
      flex-direction: column;
      width: 100%;

      .tit {
        margin: auto;
        margin-top: 60rpx;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .legend-wrapper {
        .legend {
          margin: auto;
          margin-top: 80rpx;

          &,
          image {
            width: 472rpx;
            height: 472rpx;
            background-color: #185199;
          }
        }

        .annotation-wrapper {
          margin-top: 60rpx;

          display: flex;
          align-items: center;
          padding: 0 40rpx;
          justify-content: space-between;

          .annotation-box {
            display: flex;
            align-items: center;

            .icon {
              width: 16rpx;
              height: 16rpx;
              background: #A09FF2;
              border-radius: 11rpx;
            }

            .text {
              font-size: 24rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              color: #333333;
            }
          }
        }
      }

      //.legend-wrapper - end


    }

    // .norm-comparison-box - end

    .detailed-results-box {
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;

      .summary-wrapper {
        .intro-box{
          display: flex;
          flex-direction: column;
          align-items: center;
          .row-1{
              margin-top: 20rpx;
              font-size: 24rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 500;
              color: #333333;
            
              position: relative;
            
              &::after {
                width: 17rpx;
                height: 1rpx;
                content: '';
                background-color: #979797;
                top: 50%;
                transform: translateY(-50%);
                right: -29rpx;
                position: absolute;
              }
            
              &::before {
                width: 17rpx;
                height: 1rpx;
                content: '';
                background-color: #979797;
                top: 50%;
                transform: translateY(-50%);
                left: -29rpx;
                position: absolute;
              }
          }
          //.row-1 - end
          .row-2{
            margin-top: 12rpx;
            font-size: 24rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 500;
            color: #333333;
            
          }
        }
        .conclusion-box{
          .row-1,.row-2{
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .row-1{
            font-size: 70rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #185199;
          }
          .row-2{
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #333333;
            column-gap: 18rpx;

          }
        }
        .tit {}
      }



    }

    // .detailed-results-box - end
    
    .occupational-advantage-box{
      // margin-top: 70rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 70rpx 0;
      
      .text-list{
        margin-top: 54rpx;
      }
      
    }
    // .occupational-advantage-box -end

    .radar-box {
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 70rpx 0;

      .radar-canvas {
        margin-top: 70rpx;
      }
    }

    .science-popularization-box {
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;

      .summary-wrapper {
        padding: 0;
        .img {
          margin: auto;
          margin-bottom: 52rpx;

          &,
          image {
            width: 568rpx;
            height: 248rpx;
            // background-color: #185199;
          }
        }

        .tit {}
      }

    }

    // .science-popularization-box - end
    
    .occupational-recommend-box{
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      
      .block{
        margin-top: 54rpx;
        display: flex;
        justify-content: center;
      }
      
      .img{
        width: 540rpx;
        height: 540rpx;
      }
    }
    
    // .occupational-recommend-box - end

    .suggestions-box {
      margin-top: 100rpx;
      display: flex;
      flex-direction: column;
      width: 100%;

      .summary-wrapper {
        .img {
          margin: auto;
          margin-bottom: 70rpx;

          &,
          image {
            width: 558rpx;
            height: 276rpx;
            background-color: #185199;
          }
        }

        .tit {}
      }
    }

    // .suggestions-box - end

    .references-box {
      margin-top: 70rpx;
      display: flex;
      flex-direction: column;
      width: 100%;

      .tit {
        margin-left: 36rpx;
        width: fit-content;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #195199;
        padding-bottom: 6rpx;
        border-bottom: 2rpx solid rgba(25, 81, 153, .3);
      }

      .text-list {
        margin: auto;
        margin-top: 18rpx;
        width: 675rpx;
        // height: 1416rpx;
        border: 1rpx solid #C1C1C1;
        padding: 14rpx 18rpx;

        .text {
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #666666;
          line-height: 46rpx;
          text-indent: 1.5em;
        }
      }
    }

    // .references-box -end
    .report-time-box {
      margin: auto;
      margin-top: 32rpx;
      width: 709rpx;
      border-top: 4rpx solid #666;
      padding-top: 16rpx;
      padding-bottom: 50rpx;
      padding-left: 14rpx;
      padding-right: 14rpx;
      display: flex;
      justify-content: space-between;

      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 300;
      color: #666666;

    }




    .p {

      font-size: 32rpx;
      font-family: PingFang-SC, PingFang-SC;
      // font-weight: 500;
      color: #333333;
      line-height: 62rpx;
      text-indent: 1.5em;

    }

    .summary-wrapper {
      padding: 0 40rpx;
      margin-top: 50rpx;
      margin-bottom: 30rpx;

      .tit {
        margin: auto;
        text-align: center;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #185199;
        margin-bottom: 50rpx;

      }
    }

    .block {
      padding: 0 40rpx;
      margin-bottom: 40rpx;

      .sub-tit {
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #195199;
        margin-bottom: 18rpx;
        margin-top: 70rpx;
        margin-left: 0;
      }

      .text-list {
        display: flex;
        flex-direction: column;
        row-gap: 16rpx;

        .li {
          width: 694rpx;

          // width: 592rpx;
          // height: 75rpx;
          line-height: 75rpx;
          background-image: linear-gradient(270deg, rgba(238, 238, 238, 0) 0%, rgba(245, 249, 255, 0.4) 53%, #D8E9FF 100%);
          background-size: 592rpx 75rpx;
          background-repeat: no-repeat;
          border-radius: 2rpx;
          // opacity: 0.43;

          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
          // font-weight: 500;
          color: #333333;

          padding-left: 20rpx;
          padding-right: 20rpx;
        }
      }
    }
      
    .checkup-mental-entry-box{
        
      width: 100%;
      margin-top: 36rpx;
      margin-bottom: 8rpx;
      justify-content: center;
      display: flex;
      align-items: center;
    }
  }
</style>